<template>
    <div class="wel-box">
        <h2>欢迎使用！ ( ＾∀＾）</h2> 
        <!-- <van-circle
  v-model:rate="currentRate"
  :clockwise="false"
  text="跳过"
/> -->
    <div class="brand">
        pilipili
    </div>
    <div class="djs" @click="clickEvt">
         跳过<span>{{count}}</span>
    </div>
    </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import {ref} from 'vue'
const router = useRouter()
// 计时
const count = ref(5)
let timer: number = setInterval(function() {
    count.value -= 1;
    if (count.value < 1) {
        clearInterval(timer)
            router.push('/home')     
        // if (count.value === 'success') {
        //     router.push('/home')
        // } else {
        //     router.push('/login')
        // }
    }
}, 1000)
// 点击跳转事件
function clickEvt(){
    clearInterval(timer)
        router.push('/login')
}
// onBeforeMount(function(){
//     let _cache = localStorage.getItem(AUTO_CACHE-KEY)
//     if( _cache){
//         let _token =decodeApi(_cache)

//     }
// })
</script>
<style lang="less" scoped>
@import "../../style/common.less";
.wel-box{
    overflow-x: hidden;
    display: block;
    height: 100vh;
    width: 100vw;
    position: relative;
    background: url(../../images/welcome.png ) no-repeat center ;
    background-size: 100% 100%;
    h2{
        margin-top: 10px;
        color: @b7;
        font-family:Youyuan;
        text-align: center;
        font-size: 18px;
    }
    .brand{
        display: block;
        position: absolute;
        right: 146px;
        bottom: 100px;
        color: @b3;
        font-weight: bold;
        font-size: 26px;
        font-style: italic;
    }
    @h1:30px;
    .djs{
        display: block;
        width: 65px;
        height:@h1;
        background-color: rgba(0, 0, 0, .2);
        text-align: center;
        line-height: @h1;
        font-size:16px ;
        color: white;
        border-radius: 16px;
        position: absolute;
        right: 20px;
        bottom: 30px;
        span{
            font-size: 14px;
          margin-left: 4px;

        }
    }
   
}
</style>